<!DOCTYPE html>
<html lang="zh-cn">

<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<title>起始页</title>
	<link rel="stylesheet" href="../stylesheets/common.css" />
	<link rel="stylesheet" href="../stylesheets/table.css" />
</head>

<body>
	<div class="place">
		<span class="label-span">位置：</span>
		<ul id="place-list" class="place-ul">
			<li>
				首页
			</li>
		</ul>
	</div>
	<div class="body-warp start-page">
		<div class="panel">
			<div class="panel-body">
				<ul class="start-panel shortcut-list">
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe629;</i>
                            </span>
							<span>1</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe606;</i>
                            </span>
							<span>2</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe625;</i>
                            </span>
							<span>3</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe61b;</i>
                            </span>
							<span>4</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe61a;</i>
                            </span>
							<span>5</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe616;</i>
                            </span>
							<span>6</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe609;</i>
                            </span>
							<span>7</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe610;</i>
                            </span>
							<span>8</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe605;</i>
                            </span>
							<span>9</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe604;</i>
                            </span>
							<span>10</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe602;</i>
                            </span>
							<span>11</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe601;</i>
                            </span>
							<span>12</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe60f;</i>
                            </span>
							<span>13</span>
						</a>
					</li>
					<li>
						<a class="shortcut" href="#">
							<span class="shortcut-block">
                                <i class="iconfont">&#xe624;</i>
                            </span>
							<span>14</span>
						</a>
					</li>
				</ul>
				<!--add 新增：统计信息面板-->
				<div class="start-panel icon-block">
					<a class="iconfont left-arrow disabled" href="javascript:void(0);" title="上一页">&#xe60e;</a>
					<a class="iconfont right-arrow" href="javascript:void(0);" title="下一页">&#xe60d;</a>
					<div class="app-warp">
						<ul class="app-list clearfix" id="app-list">
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
							<li>
								<a href="#">
									<img src="../images/icon/icon2.png" alt="图标" />
									<p>智课</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
				<div class="start-panel system-info">
					<p>
						<span class="mr-10">
                            <i class="iconfont">&#xe624;</i>
                            <b><span class="text">蔡露芳</span>您好，欢迎使用评比系统！</b>
						</span>
						<a href="#">帐号设置</a>
					</p>
					<p>
						<span class="mr-10">
                            <i class="iconfont">&#xe614;</i>
                            您上次登录的时间：2015-3-19 15:22
                        </span>
						<span>(不是您登录的？<a href="#">请点这里</a>）</span>
					</p>
				</div>
				<div class="start-panel start-list ">
					

					<h5><i class="iconfont">&#xe60f;</i><a href="#">统计信息</a></h5>
					
					<form>
						<div class="filter_condition"><strong>选择时间段统计：</strong>
							<input class="form-control date" id="date_start" type="text" /><span>到</span>
							<input class="form-control date" id="date_end" type="text" />
						</div>
						<div class="filter_result">
							<strong class="symbol">&gt;&gt;</strong>统计结果：
							<span>激活用户数:251</span>
							<span>UV:57</span>
							<span>订单量:251</span>
						</div>
						<table class="filter_table">
							<tbody>
								<tr>
									<th>省份</th>
									<th>激活数</th>
									<th>UV</th>
									<th>订单量</th>
								</tr>
								<tr>
									<td>浙江省</td>
									<td>105</td>
									<td>1225</td>
									<td>155</td>
								</tr>
								<tr>
									<td>上海市</td>
									<td>315</td>
									<td>3225</td>
									<td>255</td>
								</tr>
								<tr>
									<td>江苏省</td>
									<td>65</td>
									<td>755</td>
									<td>35</td>
								</tr>
								<tr>
									<td>广东省</td>
									<td>405</td>
									<td>1825</td>
									<td>105</td>
								</tr>
							</tbody>
						</table>
					</form>
				</div>
				<div class="start-panel start-list multiple">
					<h5><i class="iconfont">&#xe60f;</i><a href="#">我参与的评比</a></h5>
					<ul>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>您可以进行密码修改、账户设置等操作</li>
					</ul>
					<ul>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>您可以进行密码修改、账户设置等操作</li>
					</ul>
				</div>
				<div class="start-panel start-list">
					<h5><i class="iconfont">&#xe60f;</i>查看Uimaker网站使用指南</h5>
					<ul>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>
							<a href="#">[报名中]2015年瓯海区论文评比大赛</a>
						</li>
						<li>您可以进行密码修改、账户设置等操作</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../ext/jquery/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="../ext/laydate/laydate.js"></script>
	<script type="text/javascript" src="../ext/layer_v2/layer.js"></script>
	<script type="text/javascript" src="../javascripts/tool.js"></script>
	<script>
		//单行个数
		var iconWidth = 0;
		var $dom = $('#app-list');
		var liNums = (function () {
			var listWidth = $dom.width();
			iconWidth = $dom.find('li').outerWidth();
			var liNums = parseInt(listWidth / iconWidth);

			return liNums;
		})();
		//每行宽度
		var width = liNums * iconWidth;

		$(function () {
			init();
			initWidget()
			addListeners();
		});

		//初始化
		function init() {
			$dom.each(function (index, el) {
				var length = $(this).find('li').length;
				var totalPage = length % liNums === 0 ? length / liNums : parseInt(length / liNums) + 1;

				$(this).data({
					'curPage': 1,
					'totalPage': totalPage
				});

				if (totalPage > 1) {
					$('.right-arrow').removeClass('disabled');
				} else {
					$('.right-arrow').addClass('disabled');
				}
			});
		}

		/* 初始化控件 */
		function initWidget() {

			//初始化日期控件

			laydate({
				elem: '#date_start',
				event: 'focus'
			});
			laydate({
				elem: '#date_end',
				event: 'focus'
			});

		}

		function addListeners() {
			$('.left-arrow').bind('click', function (event) {
				if ($(this).hasClass('disabled')) {
					return false;
				}

				loadPage($dom.data('curPage') - 1, $(this));
			});
			$('.right-arrow').bind('click', function (event) {
				if ($(this).hasClass('disabled')) {
					return false;
				}

				loadPage($dom.data('curPage') + 1, $(this));
			});
		}

		function loadPage(pageNum, $arrow) {
			if (pageNum <= $dom.data('totalPage') && pageNum > 0) {
				$dom.animate({
					marginLeft: '-' + width * (pageNum - 1) + 'px'
				}, 'fast');
				$dom.data('curPage', pageNum);
			}

			var iconBlock = $dom.parents('.icon-block');

			if (pageNum === 1) {
				iconBlock.find('.left-arrow').addClass('disabled');
			} else {
				iconBlock.find('.left-arrow').removeClass('disabled');
			}

			if (pageNum === $dom.data('totalPage')) {
				iconBlock.find('.right-arrow').addClass('disabled');
			} else {
				iconBlock.find('.right-arrow').removeClass('disabled');
			}
		};
	</script>
</body>

</html>